<template>
    <div class="page-container">
        <!--工具栏-->

        <el-card class="card-box" :body-style="{ padding: '12px' }">
            <TableToolBar :showSearch.sync="showSearch" @queryTable="findPage" :hasSearch="false" :columns="columns">
                <el-button type="primary" size="mini" @click="handleItem" icon="el-icon-plus">新增</el-button>
            </TableToolBar>
            <Table
                :columns="columns"
                :data="dataList"
                :total="total"
                :loading="loading"
                @getPageList="findPage"
                :isPagination="isPagination"
                :showNo="true"
            >
                <template slot="isValid" slot-scope="{ scope }">
                    <el-switch
                        v-model="scope.row.isValid"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleEnable(scope.row)"
                    ></el-switch>
                </template>
                <template slot="icon" slot-scope="{ scope }">
                    <svg-icon :icon-class="scope.row.icon" style="font-size: 12px"></svg-icon>
                </template>
                <template slot="type" slot-scope="{ scope }">
                    {{ getType(scope.row.type) }}
                </template>
                <template slot="oper" slot-scope="item">
                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit('edit', item.scope.row)">
                        编辑
                    </el-button>
                </template>
            </Table>
        </el-card>
        <EditItem
            v-model="dialogVisible"
            :data-form="dataForm"
            :dialog-config="dialogConfig"
            :data-form-rules="dataFormRules"
            :dialog-tag="dialogTag"
            width="700px"
            @submitForm="submitForm"
        >
            <template slot="url">
                <el-input v-model="dataForm.url" placeholder="请输入url" style="width: 75%"></el-input>
                <el-tooltip placement="top" effect="light" style="padding: 10px">
                    <div slot="content">
                        <p>URL格式：</p>
                        <p>访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头</p>
                    </div>
                    <i class="el-icon-warning" />
                </el-tooltip>
            </template>
            <template slot="icon">
                <IconPicker v-model="dataForm.icon" />
            </template>
        </EditItem>
    </div>
</template>
<script>
import EditItem from '@/components/EditItem'
import { confirm, deepClone } from '@/utils/utils'
import { fetchEditItem, fetchAddItem, appManagerPageList, enableItem } from '@/api/system/application'
import TableToolBar from '@/components/TableToolBar'
import IconPicker from '@/components/IconPicker/IconPicker'
export default {
    name: 'application',
    components: {
        EditItem,
        TableToolBar,
        IconPicker
    },
    data() {
        return {
            showSearch: false,
            isPagination: false,
            loading: false,
            dataList: [],
            total: 0,
            tableHeaderConfig: [
                {
                    title: '应用名称',
                    code: 'username',
                    type: 'input',
                    placeholder: '模糊查询'
                }
            ],
            filters: {
                username: ''
            },
            size: 'small',
            columns: [
                { prop: 'appName', label: '应用名', visible: true, key: 1 },
                { prop: 'appId', label: 'appId', minWidth: 170, visible: true, key: 0 },
                { slot: 'isValid', label: '状态', align: 'center', visible: true, key: 2 },
                { prop: 'typeCode', label: '类型', align: 'center', visible: true, key: 3 },
                { slot: 'icon', label: '图标', visible: true, key: 9 },
                { prop: 'url', label: '主页URL', visible: true, key: 4 },
                { prop: 'description', label: '描述', minWidth: 200, visible: true, key: 5 },
                { type: 'createUser', label: '创建人/创建时间', visible: true, key: 6, minWidth: 100 },
                { type: 'updateUser', label: '更新人/更新时间', visible: true, key: 7, minWidth: 100 },
                { slot: 'oper', label: '操作', align: 'center', visible: true, key: 8 }
            ],
            dataFormRules: {
                appName: [
                    {
                        required: true,
                        message: '请输入应用名称',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 10,
                        message: '最多可输入10个字符',
                        trigger: 'blur'
                    }
                ],
                // url: [
                //     {
                //         required: flase,
                //         message: '请输入主页url',
                //         trigger: 'blur'
                //     },
                //     {
                //         type: 'url',
                //         message: '请输入正确主页url',
                //         trigger: 'blur'
                //     }
                // ],
                type: [
                    {
                        required: true,
                        message: '请选择应用',
                        trigger: 'blur'
                    }
                ]
            },
            filterColumns: [],
            dialogVisible: false, // 新增编辑界面是否显示
            deptData: [],
            roles: [],
            // 新增编辑界面数据
            dataFormDefault: {
                isValid: 1,
                appName: '',
                description: '',
                type: '',
                url: ''
            },
            dataForm: {},
            // dialog 要渲染的数据json
            dialogConfig: [
                { title: '应用名称', code: 'appName', type: 'input' },
                {
                    title: '应用类型',
                    code: 'type',
                    type: 'select',
                    options: [
                        {
                            value: '1',
                            label: 'WEB'
                        },
                        {
                            value: '2',
                            label: 'App'
                        },
                        {
                            value: '3',
                            label: 'RIA'
                        },
                        {
                            value: '0',
                            label: '其他'
                        }
                    ]
                },
                { title: '主页URL', slot: 'url' },
                { title: '图标', slot: 'icon' },
                { title: '应用描述', code: 'description', type: 'textarea' }
            ],
            dialogTag: 'add', // 编辑与新样的标识,
            options: [],
            defaultParams: {
                label: 'name',
                value: 'id',
                children: 'children'
            },
            typeArr: ['其他', 'web', 'app', 'ria']
        }
    },
    mounted() {
        this.findPage(null)
    },
    methods: {
        // 获取分页数据
        findPage() {
            this.loading = true
            // 入参
            const params = Object.assign({}, this.filters)
            console.log('findpage params', this.params)
            appManagerPageList(params)
                .then((res) => {
                    const { data } = res
                    this.dataList = data || []
                    this.total = 10
                })
                .finally(() => {
                    this.loading = false
                })
        },
        getType(type) {
            return this.typeArr[type]
        },
        // 禁用
        handleEnable(row) {
            const { id, isValid, appId } = row
            const tip = isValid === 0 ? '禁用后用户无法查看此应用，确认要禁用吗？' : '是否要启用?'
            const params = {
                appId: id,
                isValid
            }
            confirm(tip)
                .then(() => {
                    enableItem(params).then((res) => {
                        this.$message.success('操作成功')
                        this.findPage()
                    })
                })
                .catch(() => {
                    console.log(isValid)
                    row.isValid = isValid == 0 ? 1 : 0
                })
        },
        // 显示新增界面
        handleItem() {
            this.dialogVisible = true
            this.dialogTag = 'add'
            this.dataForm = Object.assign({}, this.dataFormDefault)
        },
        // 显示编辑界面
        handleEdit(tag, params) {
            this.dialogVisible = true
            const { type } = params
            this.dataForm = Object.assign({}, params, {
                type: type + ''
            })
            this.dialogTag = tag
        },
        // 编辑
        submitForm(params) {
            const { dialogTag } = this
            const fetchApi = dialogTag === 'add' ? fetchAddItem : fetchEditItem
            fetchApi(params)
                .then((res) => {
                    this.$message({
                        type: 'success',
                        message: '提交成功'
                    })
                    this.dialogVisible = false
                    this.findPage()
                })
                .then(() => {
                    //  this.findPage();
                })
        }
    }
}
</script>

<style scoped></style>
